<template>
  <div class = "floor-nav">
    <div class = "floor-list-top">
      <span>最新MV<i-right theme = "two-tone" size = "17" :fill = "['#000' ,'#000']" /></span>
      <category-static-navigation :navTagList = "navTagList"></category-static-navigation>
    </div>
    <el-space :size = "30" wrap class = "floor-list-recommend">
      <router-link to = "/" class = "floor-item" v-for = "item in 6" :key = "item">
        <el-image style = "width: 300px ; height: 100px" :src = "logo" fit = "fill" />
        <div class = "column-container ">
          <span class = "content-title">title</span>
          <span class = "content-author">by &nbsp;<span>author</span></span>
        </div>

      </router-link>
    </el-space>
  </div>
  <div class = "floor-nav">
    <div class = "floor-list-top">
      <span>热播MV<i-right theme = "two-tone" size = "17" :fill = "['#000' ,'#000']" /></span>
    </div>
    <el-space :size = "30" wrap class = "floor-list-recommend">
      <router-link to = "/" class = "floor-item" v-for = "item in 6" :key = "item">
        <el-image style = "width: 300px ; height: 100px" :src = "logo" fit = "fill" />
        <div class = "column-container ">
          <span class = "content-title">title</span>
          <span class = "content-author">by &nbsp;<span>author</span></span>
        </div>

      </router-link>
    </el-space>
  </div>
</template>

<script setup>
import logo from "@/assets/logo.png";
import CategoryStaticNavigation from "@/components/reuse/CategoryStaticNavigation";


const navTagList = ['华语', '华语', '华语', '华语', '华语']
</script>

<style lang = "less" scoped>
.floor-nav {
  font-size: 17px;
  font-weight: bold;
  color: black;
  margin-bottom: 50px;

  .floor-list-top {
    display: flex;
    justify-content: space-between;
  }

  .floor-list-recommend {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    justify-content: space-between;

    .floor-item {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .content-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .content-author {
        font-size: 8px;
        color: #989696;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }


      &:nth-last-child(1) {
        padding-right: 0;

      }

    }


  }
}
</style>